<template>
  <div class="meetingList">
    <div class="searchBox">
      <van-search
        v-model="searchValue"
        placeholder="输入会议室名称进行搜索"
        @search="getList"
        :left-icon="leftIcon"
      />
      <div class="searchBtn" @click="getList">搜索</div>
    </div>
    <div class="listBox">
      <div class="title">
        <div class="Box showText">
          <span class="leftIcon"></span>
          会议室
        </div>
        <div class="Box">
          <span class="rightIcon"></span>
          操作
        </div>
      </div>
      <div class="content">
        <!-- 搜索列表 -->
        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            class="list"
            v-model="isLoading" 
            :finished="isFinished"
            finished-text="没有更多了"
            @load="getSearchList"
          > -->
        <div class="listItem" v-for="(i, index) in list" :key="index">
          <span class="showText">{{ i.fdName }}</span>
          <span class="showBtn" @click="goToDetail(i.placeId)">
            点击展示
            <span class="showIcon"></span>
          </span>
        </div>
        <!-- </van-list>
        </van-pull-refresh> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getMeetingList } from "@/api/index";
import md5 from "js-md5";
export default {
  name: "meetingList",
  created() {
    this.getList();
  },
  data() {
    return {
      searchValue: "",
      leftIcon: require("../assets/icon_meeting room_search@2x.png"),
      refreshing: false,
      // isLoading: true, //数据更新完毕后设为false,否则为true
      isFinished: false, //分页数据已全部加载完毕true,否则为false
      res: [
        {
          placeId: "1", // 会议室id
          fdName: "会议室1", // 会议室name
        },
        {
          placeId: "2",
          fdName: "会议室2",
        },
        {
          placeId: "3",
          fdName: "会议室3",
        },
        {
          placeId: "4",
          fdName: "会议室4",
        },
        {
          placeId: "5",
          fdName: "会议室5",
        },
        {
          placeId: "6",
          fdName: "会议室6",
        },
        {
          placeId: "7",
          fdName: "会议室7",
        },
        {
          placeId: "8",
          fdName: "会议室8",
        },
        {
          placeId: "9",
          fdName: "会议室9",
        },
        {
          placeId: "10",
          fdName: "会议室10",
        },
        {
          placeId: "11",
          fdName: "会议室11",
        },
        {
          placeId: "12",
          fdName: "会议室12",
        },
        {
          placeId: "13",
          fdName: "会议室13",
        },
        {
          placeId: "14",
          fdName: "会议室14",
        },
        {
          placeId: "15",
          fdName: "会议室15",
        },
        {
          placeId: "16",
          fdName: "会议室16",
        },
      ],
      list: [],
      page: 1,
      limit: 10,
      total: 0,
    };
  },
  methods: {
    onSearch(val) {
      console.log(val);
    },
    async getSearchList() {
      // this.isLoading = true;
      // const { data, status } = await getSearchList({
      //   fdName: this.searchValue,
      //   limit: this.limit,
      //   page: this.page,
      // });
      // const curData = data;
      const curData = this.res;
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      this.list = [...this.list, ...curData];
      // if (status === 200) {
      //   this.list = [...this.list, ...curData.data.rows];
      //   this.isLoading = false;
      //   this.total = curData.data.total;
      //   this.page++;
      // }
      // console.log(this.total, this.list.length);
      // if (!curData.data || this.total == this.list.length) {
      //   this.isFinished = true;
      // } else {
      //   this.isFinished = false;
      // }
    },
    onRefresh() {
      // 清空列表数据
      this.isFinished = false;
      this.page = 1;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      // this.isLoading = true;
      this.getSearchList();
    },
    getList() {
      getMeetingList({
        fdName: this.searchValue,
        sign: md5("1"),
      }).then((res) => {
        console.log("res", res);
        this.list = res.data.data.rows;
      });
    },
    goToDetail(id) {
      this.$router.push({
        path: "/meetingDetail",
        query: {
          placeId: id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.meetingList {
  width: 100vw;
  height: 100vh;
  background: url("../assets/pic_meeting room_bg@2x.png") no-repeat;
  background-size: 100%;
  .searchBox {
    width: 1720px;
    height: 90px;
    display: flex;
    padding: 169px 100px 50px 100px;
    .van-field__left-icon {
      width: 56px;
      height: 56px;
      img {
        width: 56px;
        height: 56px;
      }
    }
    .van-search {
      width: 1479px;
      height: 90px;
      background: #fff3e6;
      box-shadow: 0px 0px 10px 0px #f15700;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      opacity: 0.9;
    }
    .van-search__content {
      background: #fff3e6;
      opacity: 0.9;
    }
    .van-field__control {
      font-size: 38px;
      color: #ff5e00 !important;
    }
    .van-field__value {
      display: flex;
      align-items: center;
    }
    ::-webkit-input-placeholder {
      color: #ff5e00;
      font-weight: 400;
    }
  }
  .searchBtn {
    width: 241px;
    height: 90px;
    background: url("../assets/pic_meeting room_btn@2x.png") no-repeat;
    background-size: 100%;
    // font-weight:bold;
    font-size: 40px;
    color: #ffffff;
    text-align: center;
    line-height: 90px;
  }
  .listBox {
    width: 1720px;
    height: 711px;
    padding: 0px 100px;
    .title {
      background: #ffffff;
      border-radius: 20px 20px 0px 0px;
      opacity: 0.9;
      display: flex;
      justify-content: space-around;
      .Box {
        height: 100px;
        line-height: 100px;
        display: flex;
        align-items: center;
        font-size: 38px;
        font-weight: 700;
        color: #ff5e00;
      }
      @mixin icon-url($url) {
        width: 72px;
        height: 72px;
        background: url($url) no-repeat;
        background-size: 100%;
      }
      .leftIcon {
        @include icon-url("../assets/icon_meeting room_room@2x.png");
      }
      .rightIcon {
        @include icon-url("../assets/icon_meeting room_operation@2x.png");
      }
    }
    .content {
      overflow-y: auto;
      overflow-x: hidden;
      width: 1720px;
      height: 611px;
      background: #ffffff;
      border-radius: 0px 0px 20px 20px;
      opacity: 0.75;
      > div:nth-child(1) {
        padding-top: 23px;
      }
    }
    .list {
      height: 611px;
    }
    .showText {
      width: 23%;
    }
    .listItem {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 1720px;
      height: 54px;
      padding: 0 40px;
      margin-bottom: 42px;
      font-size: 30px;
      color: #5a2201;
      .showBtn {
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 54px;
        width: 200px;
        height: 54px;
        font-size: 28px;
        background: rgba(255, 92, 0, 0.15);
        border-radius: 28px;
      }
      .showIcon {
        display: block;
        width: 24px;
        height: 24px;
        background: url("../assets/icon_meeting room_btn arrow@2x.png")
          no-repeat;
        background-size: 100%;
      }
    }
  }
}
</style>
